<template>
  <!-- 定义垂直菜单 -->
  <el-menu 
    default-active="1-4-1" 
    class="el-menu-vertical-demo" 
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    :collapse="isCollapse">
    <!-- 根据收缩状态显示不同标题 -->
    <h3>{{!isCollapse?'商店后台系统':'后台'}}</h3>
    <!-- 循环遍历菜单项 -->
    <el-menu-item 
      v-for="item in menu" 
      :index="item.path" 
      :key="item.path"
      @click="ClickMenu(item)">
      <!-- 显示图标 -->
      <i :class="'el-icon-'+item.icon"></i>
      <!-- 显示菜单项标题 -->
      <span slot="title">{{item.label}}</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  computed: {
    // 获取收缩状态
    isCollapse() {
      return this.$store.state.isCollapse
    },
    // 获取菜单数据
    menu() {
      console.log(this.$store.state.menu)
      return this.$store.state.menu
    }
  },
  methods: {
    // 点击菜单项触发事件
    ClickMenu(item) {
      console.log(item)
      // 跳转到相应路由
      this.$router.push({ name:item.name })
      // 提交选择的菜单项
      this.$store.commit('selectMenu', item)
    }
  }
}
</script>

<style lang="less" scoped>
// 设置未收缩状态下的菜单样式
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}
// 定义菜单样式
.el-menu {
    height: 100%;
    border: none;
    h3 {
        color: #fff;
        text-align: center;
        line-height: 48px;
    }
}
</style>